<template>
	<div>
		<ZxyhHeader v-if="$channel=='zxyh'" :title="''" :isClose='false' :isSearch='true' @formChildMsg='searchTrue'></ZxyhHeader>
		<div class="liveMoreTitle">
			<div class="search-wrap searchShow">
				<form action="javascript:return true;">
					<input type="search" v-model="searchKeyword" @keyup.13="handelSearch" ref="inputSearch">
				</form>
				<Iconfont iconClass="sousuo " />
				<div class="cancel" @click="handelBack">取消</div>
			</div>
		</div>
		<div class="searchResult">
			<cube-scroll v-if="videoItem.length > 0" :data="videoItem" ref="scroll" :options="scrollOptions" :scroll-events="['scroll']" @scroll="onScrollHandle" @pulling-up="onPullingUp()">
				<ul class="h-great-list">
					<li v-for="(v, index) in videoItem" @click="clickLookBack(v.id,v.vid)" :key="index">						
						<template v-if="v.imagUrl">
							<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" @load="onImgLoad()">
						</template>
						<template v-else>
							<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" @load="onImgLoad()">
						</template>
						<p>{{v.title}}</p>
					</li>
				</ul>

			</cube-scroll>
			<div v-else class="searchNone">
				<img src="../assets/images/searchNone.png" alt="">
				<p>没有找到相关视频</p>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from "vue";
	import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		  ZxyhHeader
		},
		data() {
			return {
				wherePage: '', //来自哪个页面
				videoItem: [],
				totalPage: true,
				nowPageNum: 1,
				disabled: false,
				checkType: "",
				secondStop: 26,
				scrollOptions: {
					pullDownRefresh: false,
					pullUpLoad: {
						threshold: 60,
						txt: {
							more: "加载更多",
							noMore: "没有更多数据"
						}
					},
					scrollbar: true
				},
				pullDownY: 0,
				pullDownStyle: "",
				scrollToY: 0,
				opacityStyle: "",
				search: false,
				maskShow: false,
				searchKeyword: '', //搜索关键字
				type: '', //分类
			};
		},
		created() {
			window.scrollTo(0, 0);
			this.dotNum();
			this.wherePage = this.$route.query.page;
			this.searchKeyword = this.$route.query.content || '';
			this.type = this.$route.query.type || '';
			this.getAllData(this.type, this.searchKeyword);
			//console.log(this.$route.query)			
		},
		mounted() {
      this.$store.dispatch("hideNav");
    },
		methods: {
			dotNum() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "liveMoreSearch_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);

				if(this.$channel=== 'gyzq'){
				    if(this.$store.state.gyzqIsApp){
					  TalkingData.onPage("p_zbjcspsearch_01")
					}else{
					  TDAPP.onCustomPage("p_zbjcspsearchh5_01","精彩视频搜索结果页");
					}  
        		}
			},
			//初始化数据
			getAllData(type, content) {
				if(this.wherePage == 'eduPage') { //乐知教育页面
					this.$http.get("/h5live/getTspdVideos", {
							params: {
								page: this.nowPageNum,
								pageSize:10,
								typeId:this.$route.query.id,
								gradeId:'',
								cityId:'',
								tagsId:'',
								title:content
							}
						})
						.then(res => {
							if(res.data.code == "000000") {
                                 if(res.data.data && res.data.data.length > 0) {
										this.videoItem = this.videoItem.concat(res.data.data)
									} else {
										this.totalPage = false
										// console.log(this.scrollToY);
										if(this.$refs.scroll) {
											this.$refs.scroll.forceUpdate();
										}
									}
							}
						})
						.catch(response => {
							this.isSearchNone = true
							console.log(response);
						});
				} else { //精彩视频页面
					this.$http
						.get("/h5live/getHomeVideo", {
							params: {
								p: this.nowPageNum,
								type,
								content
							}
						})
						.then(
							res => {
								if(res.data.code == "000000") {
									if(res.data.data && res.data.data.length > 0) {
										this.videoItem = this.videoItem.concat(res.data.data)
									} else {
										this.totalPage = false
										// console.log(this.scrollToY);
										if(this.$refs.scroll) {
											this.$refs.scroll.forceUpdate();
										}
									}
								} else {
									console.log(err);
								}
							},
							err => {
								console.log(err);
							}
						);
				}

			},
			//向上滑
			onPullingUp() {
				if(this.totalPage) {
					// 如果有新数据
					this.nowPageNum++;
					this.getAllData(this.type, this.searchKeyword);
				} else {
					// 如果没有新数据
					this.$refs.scroll.forceUpdate();
				}
			},
			onImgLoad() {
				this.$refs.scroll.refresh();
			},
			//跳转回看详情页面
			clickLookBack(id,vid) {
				if(this.wherePage == 'eduPage'){//乐知教育进来
					this.$router.push({
					path: `/${this.$channel}/lookBack_particulars/${vid}`
				  });
				}else{//精彩视频进来
					this.$router.push({
					path: `/${this.$channel}/lookBack_particulars/${id}`
				  });
				}

			},
			onScrollHandle(pos) {
				//   this.pullDownY = pos.y;
				if(pos.y > 0) {
					this.pullDownStyle = `top:0px`;
				}
			},
			//回到上一页
			handelBack() {
				if(this.wherePage == 'eduPage') {
					//this.$router.push(`/${this.$channel}/educationHome`);
					this.$router.push({
					path:`/${this.$channel}/educationHome`,
					query:{//父标签的id
						id:this.$route.query.id
					}
				})
				} else {
          if (this.$channel == 'zyzq') {
            this.$router.push({
              path: `/${this.$channel}/geratMoVideo`,
              query: {
                sel:this.$route.query.sel,
                parId:this.$route.query.parId,//父级id
              
              }
            });
          } else if(this.$channel == 'zxyh') {
            this.$router.push({
              path: `/${this.$channel}/moreVideo`,
              query: {
                sel:this.$route.query.sel,
                parId:this.$route.query.parId,//父级id
              
              }
            });
          } else {
            this.$router.push({
              path: `/${this.$channel}/geratMoreVideo`,
              query: {
                sel:this.$route.query.sel,
                parId:this.$route.query.parId,//父级id
              
              }
            });
          }
					
				}

			},
			searchFalse() {
				this.search = false
				this.maskShow = false
				this.searchKeyword = ''
			},
			//开始搜索
			handelSearch() {
				this.maskShow = false
				this.$refs.inputSearch.blur();
				this.videoItem = []
        this.getAllData(this.type, this.searchKeyword);
			}
		},
		computed: {

		}
	};
</script>

<style scoped="scoped">
	.navBlock .cube-scroll-content {
		display: block;
	}
	
	.cube-scroll-content {
		display: inline-block;
	}
	
	.cube-scroll-list-wrapper {
		min-height: 0;
	}
	
	.h-great-list {
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		width: 100%;
		padding: 0 30px;
		font-size: 0;
		padding-bottom: 10px;
	}
	
	.h-great-list li {
		width: 330px;
		margin-top: 22px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
		background: rgba(255, 255, 255, 1);
		/*box-shadow: 0px 2px 8px 2px rgba(8, 9, 6, 0.1);
  border-radius: 10px;*/
	}
	
	.h-great-list li:nth-child(even) {
		margin-left: 30px;
	}
	
	.h-great-list li img {
		width: 100%;
		height: 187px;
		border-radius: 24px;
	}
	
	.h-great-list li p {
		width: 100%;
		margin-top: 10px;
		text-align: left;
		line-height: 40px;
		vertical-align: middle;
		font-size: 26px;
		text-align: justify;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.liveMoreTitle {
		font-size: 34px;
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-weight: bold;
		margin: 15px 0;
		display: block;
		position: relative;
	}
	
	.liveMoreTitle .toBack {
		margin-right: 35px;
		display: inline-block;
		position: absolute;
		left: 10px;
	}
	
	.liveMoreTitle .toBack i {
		font-size: 34px;
		color: #000;
		padding: 10px;
	}
	
	.search-wrap {
		display: flex;
		padding-left: 20px;
		align-items: center;
		opacity: 0;
	}
	
	.search-wrap.searchShow {
		opacity: 1;
	}
	
	.search-wrap i {
		position: absolute;
		left: 50px;
		font-size: 30px;
		color: #666;
		top: 2px;
	}
	
	.search-wrap input {
		width: 620px;
		height: 60px;
		background: rgba(246, 246, 246, 1);
		border-radius: 30px;
		background: #F6F6F6;
		box-sizing: border-box;
		padding-left: 80px;
		font-size: 28px;
	}
	
	.search-wrap .cancel {
		margin-left: 30px;
		font-size: 28px;
		color: #333;
	}
	
	.begin-search {
		font-size: 40px;
		position: absolute;
		right: 40px;
		top: 0px;
	}
	/*清除谷歌浏览器下的 search 叉号 */
	
	input[type=search]::-webkit-search-cancel-button {
		-webkit-appearance: none;
	}
	/*清除IE下的 search 叉号 */
	
	input[type=search]::-ms-clear {
		display: none;
	}
	
	.searchResult {
		height: calc(100vh - 130px);
		transform: rotate(0deg);
		overflow: hidden;
	}
	
	.searchNone {
		text-align: center;
		margin-top: 30vh
	}
	
	.searchNone img {
		width: 232px;
	}
	
	.searchNone p {
		color: #444;
		font-size: 32px;
		margin-top: 55px;
	}
	.header-conatiner-zxyhIos ~ .searchResult{
		height: calc(100vh - 278px);
	}
	.header-conatiner ~ .searchResult{
		height: calc(100vh - 190px);

	}
</style>